<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const oChart = ref<HTMLDivElement | null>(null);
onMounted(() => {
    const myChart = echarts.init(oChart.value);
    const option = {
        tooltip: {
            trigger: "axis",
            axisPointer: { type: "shadow" },
        },
        grid: { left: "15%", top: "10", right: "5%", bottom: "10" },
        xAxis: {
            type: "value",
            splitLine: { show: false },
            axisLabel: { show: false },
        },
        yAxis: {
            type: "category",
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: { color: "#92dde1" },
            data: ["黄瓜", "豇豆", "番茄", "菠菜", "空心菜"],
        },
        series: [
            {
                type: "bar",
                label: { show: true, position: "right", color: "#fff" },
                barWidth: 16,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: "rgba(26, 211, 213, 0.8)" },
                    { offset: 1, color: "rgba(26, 211, 213, 0.3)" },
                ]),
                data: [18203, 29034, 131744, 104970, 23489],
            },
        ],
    };
    option && myChart.setOption(option);
});
</script>

<template>
    <section>
        <h3>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
            <b>销售额</b>
            <span>Xiao Shou E</span>
        </h3>
        <hr class="to-right" />
        <div ref="oChart" class="content"></div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
</style>
